<template>
    <Teleport to="body">
        <transition name="fade">
            <header
                class="absolute font-px top-0 left-0 z-50 h-full w-full flex justify-center items-center select-none backdrop-blur-[1px]"
                v-show="store.opened"
                @click.self="store.opened = false"
            >
                <div class="relative w-3/4 flex flex-col rounded-2xl shadow-xl overflow-hidden">
                    <nav class="absolute h-full w-full top-0 left-0 -z-10 bg-slate-800/50"></nav>
                    <header
                        class="text-white p-2 text-center shadow z-10 flex justify-evenly bg-slate-800/80"
                    >
                        <Icon class="px-2" @click="navOpened = !navOpened">menu</Icon>
                        <div class="flex-grow">{{ PanelName[store.routerViewIndex] }}</div>
                        <Icon class="px-2" @click="store.sideBar = !store.sideBar">menu</Icon>
                    </header>
                    <main class="flex flex-row overflow-hidden">
                        <transition name="popRight">
                            <div class="bg-zinc-700/90" v-if="navOpened">
                                <Sidebar class="sidebar text-sm" v-model="store.routerViewIndex">
                                    <SidebarItem v-for="name in PanelName">
                                        <template #title>
                                            <div
                                                class="text-white whitespace-nowrap w-20"
                                            >{{ name }}</div>
                                        </template>
                                    </SidebarItem>
                                </Sidebar>
                            </div>
                        </transition>

                        <div class="transition-width flex-grow overflow-hidden p-4">
                            <component :is="Components[store.routerViewIndex]"></component>
                        </div>
                    </main>
                </div>
            </header>
        </transition>
    </Teleport>
</template>

<style scoped>
.sidebar .van-sidebar-item {
    background: transparent;
}
.sidebar {
    --van-sidebar-selected-border-color: rgb(190, 44, 78);
    --van-sidebar-width: 8em;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.fade-enter-from,
.fade-leave-to {
    transform: scale(1.1);
    opacity: 0;
}
.popRight-enter-active,
.popRight-leave-active {
    transition: opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.popRight-enter-from,
.popRight-leave-to {
    @apply -translate-x-10 opacity-0;
}
</style>

<script lang="ts" setup>
import { Overlay, Sidebar, SidebarItem } from 'vant';
import ColorPalletVue from './ColorPallet/ColorPallet.vue';
import ColorPickerVue from './ColorPicker.vue';
import NormalPickerVue from './NormalPicker/NormalPicker.vue';
import { useColorPanelStore } from './store';
import Icon from '@konghayao/vue-material-icons';
import { ref } from 'vue';

const store = useColorPanelStore()
const navOpened = ref(false)
const PanelName = ['色卡编辑器', '色卡', '混色器', '图片取色器']
const Components = [NormalPickerVue, ColorPalletVue, , ColorPickerVue]
</script>
